<template>
  <div>
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      label-width="140px"
    >
      <el-form-item label="公司注册国家" prop="regCountry" required>
        <el-select filterable v-model="temp.regCountry" placeholder="请选择客户类别">
          <el-option
            v-for="item in countryList"
            :key="item.id"
            :label="item.cnName || item.cnShortName"
            :value="item.id + ''"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="涉敏地区" prop="onSensitive" required>
        <el-select v-model="temp.onSensitive">
          <el-option key="1" label="是" value="Y" />
          <el-option key="2" label="否" value="N" />
        </el-select>
      </el-form-item>

      <el-form-item label="境内公司统一社会信用代码" prop="uscCode">
        <el-input v-model.trim="temp.uscCode" autocomplete="off" />
      </el-form-item>

      <el-form-item label="客户名称" prop="invoiceClientName">
        <el-input v-model.trim="temp.invoiceClientName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="税号" prop="clientInvoiceNo">
        <el-input v-model.trim="temp.clientInvoiceNo" autocomplete="off" />
      </el-form-item>
      <el-form-item label="单位地址" prop="clientAddress">
        <el-input v-model.trim="temp.clientAddress" autocomplete="off" />
      </el-form-item>

      <el-form-item label="电话号码" prop="clientBankPhone">
        <el-input v-model.trim="temp.clientBankPhone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="开户银行" prop="clientBank">
        <el-input v-model.trim="temp.clientBank" autocomplete="off" />
      </el-form-item>
      <el-form-item label="银行账号" prop="clientBankNo">
        <el-input v-model.trim="temp.clientBankNo" autocomplete="off" />
      </el-form-item>
      <el-form-item label="SwiftCode" prop="swiftCode">
        <el-input v-model.trim="temp.swiftCode" autocomplete="off" />
      </el-form-item>
      <el-form-item label="信用金额">
        <el-input
          placeholder="请输入内容"
          v-model="temp.creditAmount"
          class="input-with-select"
        >
          <el-select
            v-model="temp.creditCU"
            slot="prepend"
            placeholder="请选择"
            style="width: 120px"
          >
            <el-option
              v-for="currancy in currencyList"
              :key="currancy.id"
              :label="currancy.cnName"
              :value="currancy.enName"
            ></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="应收保证金">
        <el-input
          placeholder="请输入内容"
          v-model="temp.planCreAmount"
          class="input-with-select"
        >
          <el-select
            v-model="temp.planCreCU"
            slot="prepend"
            placeholder="请选择"
            style="width: 120px"
          >
            <el-option
              v-for="currancy in currencyList"
              :key="currancy.id"
              :label="currancy.cnName"
              :value="currancy.enName"
            ></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="实收保证金">
        <el-input
          placeholder="请输入内容"
          v-model="temp.actCreAmount"
          class="input-with-select"
        >
          <el-select
            v-model="temp.actCreCU"
            slot="prepend"
            placeholder="请选择"
            style="width: 120px"
          >
            <el-option
              v-for="currancy in currencyList"
              :key="currancy.id"
              :label="currancy.cnName"
              :value="currancy.enName"
            ></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="账户 Information" prop="accountMsg">
        <el-input type="textarea" v-model.trim="temp.accountMsg" autocomplete="off" />
      </el-form-item>

      <el-form-item label="国内发票 Information" prop="invoiceMsg">
        <el-input type="textarea" v-model.trim="temp.invoiceMsg" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="默认航油货币单位" prop="name">
        <el-input v-model.trim="temp.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="默认航油数量单位" prop="name">
        <el-input v-model.trim="temp.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="默认航油收益方式" prop="name">
        <el-input v-model.trim="temp.name" autocomplete="off" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="save">保存更改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  customerTypeOptions,
  customerTypeKV,
  customerCategoryOptions,
  customerCategoryKV,
} from "@/utils/options";
import {
  queryCustomerPoints,
  viewCustomerFinancial,
  modifyCustomerFinancial,
} from "@/api/client";
import { querySystemCode, queryCountry } from "@/api/code";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

const defaultForm = {
  accountMsg: null,
  actCreAmount: null,
  actCreCU: "CNY",
  clientAddress: null,
  clientBank: null,
  clientBankNo: null,
  clientBankPhone: null,
  clientInvoiceNo: null,
  creditAmount: null,
  creditCU: "CNY",
  customerId: null,
  invoiceClientName: null,
  invoiceMsg: null,
  invoiceType: null,
  modifyUserName: null,
  onSensitive: "N",
  planCreAmount: null,
  planCreCU: "CNY",
  regCountry: null,
  swiftCode: null,
  uscCode: null,
};
export default {
  name: "ClientDetail",
  components: { Pagination },
  filters: {},
  props: {
    id: {
      type: Number,
      required: false,
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      listQuery: {
        customerId: "",
        limit: 10,
        page: 1,
        type: "", // 类型(0:收入 1:支出)
      },
      rules: {},
      customerTypeOptions,
      customerTypeKV,
      customerCategoryOptions,
      customerCategoryKV,
      temp: Object.assign({}, defaultForm),
      currencyList: [],
      countryList: [],
    };
  },

  created() {
    this.listQuery.customerId = this.id;
    // this.temp.customerId = this.id;
    this.querySystemCode();
    this.queryCountry();
    this.viewCustomerFinancial();
  },
  methods: {
    // 得到列表
    async viewCustomerFinancial() {
      viewCustomerFinancial({ customerId: this.listQuery.customerId }).then(
        (response) => {
          this.temp = Object.assign(this.temp, response.data);
        }
      );
    },
    querySystemCode() {
      querySystemCode({ baseIds: [9] }).then((response) => {
        this.currencyList = response.data;
      });
    },
    queryCountry() {
      queryCountry({}).then((response) => {
        this.countryList = response.data;
      });
    },

    // 搜索
    handleFilter() {
      this.listQuery.page = 1;
      this.fetchList();
    },
    save() {
      this.$confirm(`你确定要更改吗?`, "提示", {
        type: "warning",
      })
        .then(() => {
          modifyCustomerFinancial(this.temp).then((response) => {
            this.$message.success("更改成功");
          });
        })
        .catch(() => {
          this.$message.info("已取消更改");
        });

      //
    },
  },
};
</script>
